import React, { useRef, useState ,useEffect} from 'react'
import { useNavigate } from 'react-router-dom';
import { Button, SearchBar, Space, Toast, Swiper, Badge, TabBar } from 'antd-mobile'
import styles from './home.module.css'
import { Search } from 'react-vant';
import {
    AppOutline,
    MessageOutline,
    MessageFill,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons'
import { indexs } from '../../api/index'
export default function Home() {
    const [array, setArray] = useState(null);
    const [value, setValue] = useState('');
    const searchRef = useRef(null)
    let navigate = useNavigate()
    useEffect(() => {  
        indexs().then(res => {
            setArray(res.data)
        })
      }, [])
    const tabs = [
        {
            key: 'home',
            title: '首页',
            icon: <AppOutline />,
            badge: Badge.dot,
        },
        {
            key: 'todo',
            title: '待办',
            icon: <UnorderedListOutline />,
            badge: '5',
        },
        {
            key: 'message',
            title: '消息',
            icon: (active) =>
                active ? <MessageFill /> : <MessageOutline />,
            badge: '99+',
        },
        {
            key: 'personalCenter',
            title: '我的',
            icon: <UserOutline />,
        },
    ]

    function details(data) {
        navigate('/details', {
            replace: false,
            state: {
                id: data.id
            }
        })
    }
    return (
        <div className={styles.colors}>
            <div className={styles.backgroundWhite}>
                <Search
                    shape="round"
                    background="#ffffff"
                    value={value}
                    onChange={setValue}
                    placeholder="请输入搜索关键词"
                />
                <div className={styles.banner}>
                    <Swiper loop autoplay className={styles.content}  >
                        {array?.banner.map((index) => (
                            <Swiper.Item key={index}  >
                                <img className={styles.banner_img} src={index.imgs} />
                            </Swiper.Item>
                        ))};
                    </Swiper>
                </div>
                <div className={styles.sort}>
                    {array?.types.map((item, index) => (
                        <div className={styles.block} style={{ 'display': index > 7 ? 'none' : 'block' }}>
                            <img className={styles.img_list} src={item.imgs} alt="" />
                            <div>{item.name}</div>
                        </div>
                    ))}
                </div>
            </div>
            <div className={styles.scroll} >
                {
                    array?.goods.map((item, index) => (
                        <div className={styles.scrollChild} onClick={() => {
                            details(item)
                        }}>
                            <img src={item.imgs} alt="" className={styles.imge} />
                            <div>{item.name}</div>
                            <div className={styles.constadd}>￥{item.price}
                                <button className={styles.add}>+</button>
                            </div>
                        </div>
                    ))
                }
                <div></div>
            </div>
            <div className={styles.fixed}>
                <TabBar>
                    {tabs.map(item => (
                        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                    ))}
                </TabBar>
            </div>

        </div>
    )
}